$(function(){
    // 点击免费专业试用版显示弹出层
    $('.free').on("click",function(){
        $('.tanchu').show();
        // $('.upgrade').css({'transition': 'all 5s'});
        $(document.body).css({
            "overflow-y": "hidden"
        });
    })
    $('.cancel').on('click',function(){
        $('.tanchu').hide();
    })

    // $('.wenhao').on('click',function(){
       
    //     $('.question').show();
    //     // event.stopPropagation();
    // })
    // $('body').not('.question').on('click',function(){
    //     $('.question').hide();
    // })

    //点击问号，弹出对话框
    $('.wenhao').on('click',function(){
        $('.question').addClass("show");
        event.stopPropagation();
    })
    $("body").on('click',function(){
        var result=$(".question").hasClass("show");
        if(result)
        {
            $('.question').removeClass("show");
        }
    })
  
    var win;			
    $(".left_centent>div:eq(0)").attr("translatex","0").attr("translatey","0");
    $(".left_centent>div:eq(1)").attr("translatex","357").attr("translatey","0");
    $(".left_centent>div:eq(2)").attr("translatex","714").attr("translatey","0");
    var cuoluo = function() {
         win = $(window).innerWidth();
        if (win < 1830) {				
            $(".content").css("width","1410px");
            $(".content_left").css("width","1047px");
            $(".left_centent").css("width","100%");
            var $div = $(".left_centent>div");
            var $len = $(".left_centent>div").length;
            for(i = 3; i < $len ; i++) {
                var x = $div.eq(i-3).attr("translatex");
                var translatey = Number($div.eq(i-3).attr("translatey"));
                var height = $div.eq(i-3).height();
                var y = translatey+height+25;
                $div.eq(i).css("transform","translate("+x+"px,"+y+"px)").attr("translatex",x).attr("translatey",y);
            }

        }else{
            $(".content").css("width","1780px");
            $(".content_left").css("width","1404px");
            $(".left_centent").css("width","100%");				
            $(".left_centent>div:eq(3)").attr("translatex","1071").attr("translatey","0").css("transform","translate(1071px,0)");
            var $div = $(".left_centent>div");
            var $len = $(".left_centent>div").length;
            for(i = 4; i < $len ; i++) {
                var x = $div.eq(i-4).attr("translatex");
                var translatey = Number($div.eq(i-4).attr("translatey"));
                var height = $div.eq(i-4).height();
                var y = translatey+height+25;
                $div.eq(i).css("transform","translate("+x+"px,"+y+"px)").attr("translatex",x).attr("translatey",y);
            }

        }

    }
    cuoluo();
    $(window).on("resize",function() {
        win = $(window).innerWidth();
        cuoluo();

    })
    

    // 点赞心心
    $(".names>img").each(function(index,ele) {
        $(ele).attr("src","images/xin1.png").attr("dian","0");
        // 点击
        $(ele).on("click",function() {
            if($(this).attr("dian") == 0){
                $(this).attr("src","images/xin2.png").attr("title","取消").attr("dian","1");

            }else {
                $(this).attr("src","images/xin1.png").attr("title","点赞").attr("dian","0");
                
            }
            
            
        })
    });


    //广告条
    var index = 1;
    var flag = true;
    var wid = $(".banner ul li").width();
    $(".zuo").on("click",function() {
        if(flag){
            flag = false;
            index++;
            var yidong = wid*index;				
            $(".banner ul").css("transform","translateX(-"+yidong+"px)");
            setTimeout(function () {
                if (index == 6) {
                    index=1;					
                    $(".banner ul").css("transition","none");
                    var yidong = wid*index;
                    $(".banner ul").css("transform","translateX(-"+yidong+"px)");						
                }
                flag = true;
            },500)				
            $(".banner ul").css("transition","transform 0.5s");					
        }
    });
    $(".you").on("click",function() {
        if (flag) {
            flag = false;
            index--;
            var yidong = wid*index;				
            $(".banner ul").css("transform","translateX(-"+yidong+"px)");
            setTimeout(function () {
                if (index == 0) {
                    index=5;					
                    $(".banner ul").css("transition","none");
                    var yidong = wid*index;
                    $(".banner ul").css("transform","translateX(-"+yidong+"px)");						
                }
                flag = true;
            },500)				
            $(".banner ul").css("transition","transform 0.5s");
        }				
    });
    setInterval(function() {
        $(".zuo").click();
    },3000);


    //收藏
    $(".geren").on("mouseenter",function() {
        $(this).find(".shoucang").fadeIn(200);
    });
    $(".geren").on("mouseleave",function() {
        $(".shoucang").fadeOut(200);
    });
    var aa = 1;
    $(".shoucang").on("click",function(){
        if (aa == 1) {
            
                $(this).text("已收藏").css("background","#ccc").css("color","#000");

            aa = 2;

        }else {
                $(this).text("收藏").css("background","#01acf3").css("color","#fff");
        
            aa = 1;

        }
    })
    var bb = 1;
    $(".guanzhu").on("click",function(){
        if (bb == 1) {
            
                $(this).text("已关注").css("background","#ccc").css("color","#000");

            bb = 2;

        }else {
                $(this).text("关注").css("background","#01acf3").css("color","#fff");
        
            bb = 1;

        }
    })

    //设计关注
    $(".sheji").on("mouseenter",function() {
        $(this).find(".guanzhu").fadeIn(200);
    });
    $(".sheji").on("mouseleave",function() {
        $(".guanzhu").fadeOut(200);
    });

    // 热门商店联
    $(".shop").on("mouseenter",function() {
        $(this).find(".guanzhu").fadeIn(200);
    });
    $(".shop").on("mouseleave",function() {
        $(".guanzhu").fadeOut(200);
    });

    // 主题精选
    $(".zhutiimg span").css({
        backgroundPosition: "center center",
        backgroundSize: "contain",
        backgroundRepeat: "no-repeat"

    })
    //展示
    $(".zhanshi span").css({
        backgroundPosition: "center center",
        backgroundSize: "contain",
        backgroundRepeat: "no-repeat"

    })



    // 回到顶部
    $(window).on("scroll",function() {
        var scrollTop = $("html,body").scrollTop();
        if (scrollTop > 100) {
            $(".gotop").show();
        }else if (scrollTop <100){
            $(".gotop").hide();

        }

    });

    $(".gotop").on("click",function() {
        $("html,body").animate({scrollTop:0},"fast");
    });


    // 弹窗
    var wins;
    $(".left_centent>div>img").on("click",function(){				
        $(".content").hide();
        wins = $(window).innerWidth();
        var hei = $(window).innerHeight();
        $(".tanchuang").width(wins+"px").height(hei-50+"px");
        $(".tanchuang").slideDown(250);
        var aaa = (1027-$(".aaa img").width())/2;
        $(".aaa img").css("margin-left",aaa+"px");
    });
    $(".detailViewer").on("click",function(){
        $(".tanchuang").slideUp(250);
        $(".content").show();
    });
    

    $(".BoardDetailPanel span").css({
        backgroundSize:"contain",
        backgroundPosition:"center center",
        backgroundRepeat:"no-repeat"
    });

    $(".texts").on("focus",function(){
        console.log('sas')
        $(this).css("border","2px solid #01acf3");

    })
    $(".texts").on("blur",function(){
        $(this).css("border","1px solid #dee4e7");

    })


    


    //单品列表
    $(".ItemBox ul li").each(function(index,ele){
        var ind = index+1;
        if(ind%7 == 0 && index > 0){
            $(ele).css("marginRight","0");

        }
    });

    $(".ItemBox ul li span").css({
        backgroundSize:"contain",
        backgroundPosition:"center center",
        backgroundRepeat:"no-repeat"
    });
    $(".ItemBox ul li span").on("mouseenter",function() {
        $(this).siblings("div").fadeIn(200);
    });
    $(".ItemBox ul li").on("mouseleave",function() {
        $(this).find("div").fadeOut(200);
    });
    $(".ItemBox ul li div").on("mouseenter",function() {
        $(this).siblings("span::before").show();
    });

  
})